import React, { useState } from 'react';
import './home.scss';
import HOC from '../../components/HOC/HOC';
import Fbx from '../../components/fbx/fbx';
import { OrbitControls } from '@react-three/drei';
import { Canvas } from "@react-three/fiber";
import Videos from '../../components/video/vidios';
import { useNavigate  } from 'react-router-dom';
import Al_dialogue from '../../components/AI_dialogue/AI_dialogue';
// 下拉菜单
import { DownOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

// 为 Fbx 组件定义 Props 类型
interface FbxProps {
    src: string;
    num: number;
}

function Error() {
    // 使用 useNavigate 钩子函数，用于导航到其他页面
    const navigate = useNavigate();
//   const history = useHistory();
    // 按钮切换状态，使用 useState 管理多个按钮的显示/隐藏状态
    const [isShow1, setIsShow1] = useState<boolean>(true);
    const [isShow2, setIsShow2] = useState<boolean>(true);
    const [isShow3, setIsShow3] = useState<boolean>(true);
    const [isShow4, setIsShow4] = useState<boolean>(true);
    const [isShow5, setIsShow5] = useState<boolean>(true);

    // 存储一个通用的 actions 状态，使用 number 类型
    const [actions, setActions] = useState<number>(1);

    // 黑天白夜背景图切换，存储当前背景图的 URL
    const [imageUrl, setImageUrl] = useState<string>('../../../public/main.png');
    // 存储黑天白夜背景图的可用 URL 列表
    const imageUrls: string[] = ['../../../public/main.png', '../../../public/main2.png'];

    // 视频背景框的背景图 URL
    const [imageUrl2, setImageUrl2] = useState<string>('../../../public/border.png');
    // 存储视频背景框的可用背景图 URL 列表
    const imageUrls2: string[] = ['../../../public/border.png', '../../../public/border-day.png'];

    // 切换主题按钮的背景、字体和边框颜色状态
    const [buttonColor1, setButtonColor1] = useState<string>('white');
    const [buttonColor2, setButtonColor2] = useState<string>('#398bff');
    const [buttonColor3, setButtonColor3] = useState<string>('#398bff');

    // 当前选择的 Fbx 模型的 URL
    const [fbxModel, setFbxModel] = useState<string>('../../../public/model/2.glb');
    // 存储可选择的 Fbx 模型列表
    const models: string[] = ['../../../public/model/3.glb', '../../../public/model/2.glb', '../../../public/model/lhq.glb'];

    // 切换图片的函数
    const toggleImage = () => {
        // 获取当前 imageUrl 在 imageUrls 中的索引
        const currentIndex = imageUrls.indexOf(imageUrl);
        // 计算下一个图片的索引，使用取模运算实现循环切换
        const nextIndex = (currentIndex + 1) % imageUrls.length;
        // 更新 imageUrl 状态为下一个图片的 URL
        setImageUrl(imageUrls[nextIndex]);

        // 获取当前 imageUrl2 在 imageUrls2 中的索引
        const currentIndex2 = imageUrls2.indexOf(imageUrl2);
        // 计算下一个 imageUrl2 的索引
        const nextIndex2 = (currentIndex2 + 1) % imageUrls2.length;
        // 更新 imageUrl2 状态为下一个图片的 URL
        setImageUrl2(imageUrls2[nextIndex2]);

        // 切换按钮的显示状态
        setIsShow3(!isShow3);
        // 切换按钮的颜色状态
        setButtonColor1(prevColor => prevColor === 'white'? '#398bff' : 'white');
        setButtonColor2(prevColor => prevColor === '#398bff'? 'white' : '#398bff');
        setButtonColor3(prevColor => prevColor === '#398bff'? 'white' : '#398bff');
    };

    // 导航到展览页面的函数
    const exhibitions = () => {
        // navigate('/exhibition');
        window.location.href="/Exhibition"
        //  history.push('/exhibition');
    };

    // 开启/关闭弹幕的函数
    const scrolling = () => {
        // 切换弹幕输入框的显示状态
        setIsShow4(!isShow4);
        setIsShow2(!isShow2);
        console.log('弹幕开启');
        if (localStorage.getItem('scrolling')) {
            localStorage.removeItem('scrolling');
        } else {
            localStorage.setItem('scrolling', 'false');
        }
    };

    // 开启/关闭语音的函数
    const Voices = () => {
        setIsShow5(!isShow5);
    };

    // 开启/关闭呼唤的函数
    const Call_out = () => {
        setIsShow4(!isShow4);
    };

    // 切换 Fbx 模型的函数，接收一个模型的 URL 作为参数
    const selectFbxModel = (model: string) => {
        setFbxModel(model);
    };

    // 下拉菜单的菜单项配置
    const items: MenuProps['items'] = [
        {
            key: '1',
            label: '动作1',
            extra: '⌘',
            // 点击菜单项时调用 selectFbxModel 函数并传递 models 数组的第一个元素
            onClick: () => selectFbxModel(models[0])
        },
        {
            key: '2',
            label: '动作2',
            extra: '⌘',
            // 点击菜单项时调用 selectFbxModel 函数并传递 models 数组的第二个元素
            onClick: () => selectFbxModel(models[1])
        },
        {
            key: '3',
            label: '动作3',
            extra: '⌘',
            // 点击菜单项时调用 selectFbxModel 函数并传递 models 数组的第三个元素
            onClick: () => selectFbxModel(models[2])
        }
    ];

    return (
        <div className='box' style={{ backgroundImage: `url(${imageUrl})` }}>
            <header className='header'>
                <div className='psa'>
                    {/* 进入 3D 展览馆的按钮，点击时调用 exhibition 函数 */}
                    <button className='gallerys' onClick={() => exhibitions()}>进入 3D 展览馆</button>
                    {/* 切换主题的按钮，点击时调用 toggleImage 函数，并根据 buttonColor 状态设置样式 */}
                    <button className='gallerys' onClick={() => toggleImage()} style={{ backgroundColor: buttonColor1, color: buttonColor2, border: `1px solid ${buttonColor3}` }}>切换主题</button>
                </div>
            </header>
            <main className='main'>
                <div>
                    <div className='Voice_wake_up'>
                        {/* 提示用户呼唤 "小爱小爱" 进行对话的文本 */}
                        <span className='vioce_text' style={{ fontSize: '22px' }}>呼唤"小爱小爱",进行新一轮对话</span>
                        {/* 触发 Call_out 函数的图片按钮 */}
                        <img src="../../../public/notice.gif" className='vioce_img' onClick={() => Call_out()} />
                    </div>
                </div>
                <div className='left_fbx'>
                    <Canvas camera={{ position: [0, 5, 6], fov: 15 }}>
                        {/* 创建一个环境光，强度为 0.5 */}
                        <ambientLight intensity={0.5} />
                        {/* 创建一个方向光，位置为[0,5,0]，强度为 5 */}
                        <directionalLight position={[0, 5, 0]} intensity={5} />
                        {/* 创建一个 OrbitControls 组件，用于控制相机旋转 */}
                        <OrbitControls></OrbitControls>
                        {/* 创建一个 Fbx 组件，加载模型文件，并传入 actions 参数 */}
                        <Fbx src={fbxModel} num={actions} />
                    </Canvas>
                    {/* 下拉菜单组件，包含多个动作切换选项 */}
                    <Dropdown menu={{ items }} className='home_dropdown' >
                        <a onClick={(e) => e.preventDefault()} style={{backgroundColor: 'rgba(35, 111, 193, 0)' }} >
                            <Space className='home_dropdown_space' >
                                {/* 下拉菜单的触发按钮文本和图标 */}
                                动作切换
                                <DownOutlined  />
                            </Space>
                        </a>
                    </Dropdown>
                </div>
                <div className='home_video_css' style={{ backgroundImage: `url(${imageUrl2})` }}>
                    {/* 根据 isShow4 状态显示 Videos 组件或 AI_text 组件 */}
                    {isShow4? (
                        <Videos />
                    ) : (
                        <div className='AI_text'>
                            <Al_dialogue />
                        </div>
                    )}
                </div>
            </main>
            <footer className='footer'>
                <div className='Toggle'>
                    <li>
                        {/* 根据 isShow1 状态切换显示不同的图标，点击时调用 setIsShow1 函数 */}
                        {isShow1? (
                            <img src="../../../public/answer-model.svg" alt="" onClick={() => setIsShow1(!isShow1)} />
                        ) : (
                            <img src="../../../public/answer-icon.svg" alt="" onClick={() => setIsShow1(!isShow1)} />
                        )}
                    </li>
                    <li>
                        {/* 根据 isShow2 状态切换显示不同的图标，点击时调用 scrolling 函数 */}
                        {isShow2? (
                            <img src="../../../public/chat-model.svg" alt="" onClick={() => scrolling()} />
                        ) : (
                            <img src="../../../public/chat-model-active.svg" alt="" onClick={() => scrolling()} />
                        )}
                    </li>
                    <li>
                        {/* 根据 isShow3 状态切换显示不同的图标，点击时调用  toggleImage 函数 */}
                        {isShow3? (
                            <img src="../../../public/night-model.svg" alt="" onClick={() => toggleImage()} />
                        ) : (
                            <img src="../../../public/day-model.svg" alt="" onClick={() => toggleImage()} />
                        )}
                    </li>
                </div>
                <div className='Voice'>
                    {/* 根据 isShow5 状态切换显示不同的图标，点击时调用 Voices 函数 */}
                    {isShow5? (
                        <img src="../../../public/speaking.jpeg" alt="" onClick={() => Voices()} />
                    ) : (
                        <img src="../../../public/speeching.gif" alt="" onClick={() => Voices()} />
                    )}
                </div>
            </footer>
        </div>
    );
}

export default HOC(Error);